import { AfterViewInit, Directive, ElementRef, Input, OnDestroy, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appClickOutside]'
})
export class ClickOutsideDirective implements AfterViewInit, OnDestroy {
  @Input() appClickOutside: () => void;
  destory;
  constructor(
    public el: ElementRef,
    private render: Renderer2,
  ) { }

  ngAfterViewInit() {
    this.destory = this.render.listen(document, 'click', event => {
      (!this.el.nativeElement.parentNode.contains(event.target)) && this.appClickOutside()
    })
  }

  ngOnDestroy() {
    this.destory();
  }
}
